<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>注册</title>
    <link rel="stylesheet" href="../css/basic.css">
    <style type="text/css">
        .user-info-area {
            height: auto;
            width: 90%;
            margin: auto;
            overflow: hidden;
        }

        .user-info-area ul {
        }

        .user-info-area ul li {
            position: relative;
            height: 1.2rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }

        .li-type {

        }

        .li-type {
            line-height: 1.6rem;
            display: block;
            color: #666;
            font-size: 0.28rem;
            height: 100%;
            width: 18%;
            left: 0;
        }

        .input-area {
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
            color: #666;
        }

        .input-area-code {
            right: 30%;
            /*background-color: aqua;*/
            width: 46%;
        }

        .input-area-me {
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            left: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            outline: none;
        }

        .get-code {
            font-size: 0.28rem;
            outline: none;
            background-color: transparent;
            color: #666;
            width: 25%;
            position: absolute;
            right: 4%;
            bottom: 0.15rem;
            height: 0.5rem;
            border-left: 1px solid #e3e3e3;
        }

        .select-local-area {
            font-size: 0.28rem;
            width: 70%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
        }

        .select-local-area select {
            width: 32%;
            height: 100%;
            outline: none;
            color: #666;
        }

        .select-local-area select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            font-size: 0.28rem;
            /*很关键：将默认的select选择框样式清除*/
            background-color: transparent;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            /*在选择框的最右侧中间显示小箭头图片*/
            background-image: url("../../master/img/bottomIcon.jpg");
            background-repeat: no-repeat;
            background-position: 1rem center;
            background-size: 0.2rem;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            /*padding-right: 14px;*/
        }

        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        .select-local-area select::-ms-expand {
            display: none;
        }

        /*选择区域*/
        .agreement {
            position: relative;
            width: 100%;
            height: 0.5rem;
            margin-top: 0.3rem;
        }

        .agreement a {
            position: absolute;
            left: 0.5rem;
            top: 0.1rem;
            color: #666;
            font-size: 0.28rem;
        }

        /*选矿样式*/
        /*隐藏*/
        #checkboxInput {
            display: none;
        }

        .checkbox-area {
            float: left;
            width: 0.2rem;
            height: 0.2rem;
            position: relative;
            margin-top: 0.15rem;
        }

        /* Create the checkbox button*/
        .checkbox-area label {
            display: block;
            width: 100%;
            height: 100%;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            z-index: 1;
            background: snow;
            border: 1px solid #CDC9C9;
        }

        /*Create the checked state*/
        .checkbox-area input[type=checkbox]:checked + label {
            background: #EE2C2C;
        }

        /*选矿end*/

        .register-btn-area {
            text-align: center;
            width: 100%;
            height: 0.8rem;
            margin: 0.8rem auto 0.4rem auto;
        }

        .register-btn {
            height: 100%;
            width: 45%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }

        .one {
            float: left;
        }

        .two {
            float: right;
        }

        /*.server-area{*/
        /*width: 93% !important;*/
        /*background-position: right !important;*/
        /*}*/
        /*.area-server{width: 76%;}*/
        .prompt-area {
            padding-top: 0.1rem;
            width: 100%;
            height: auto;
        }

        .prompt-area p {
            font-size: 0.28rem;
            color: #666;
        }

        .to-login {
            width: 100%;
            height: auto;
        }

        .had-account {
            color: #666;
            font-size: 0.28rem;
        }

        .to-login-now {
            font-size: 0.28rem;
            color: #F23A38;
        }

        /*设置主体z-index*/
        .main-body-area {
            z-index: 100
        }

        .hideDom {
            display: none
        }

        /*以下为遮罩层*/
        .modal-area {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .modal-box {
            z-index: 100000;
            background-color: black;
            opacity: 0.5;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .show-box-area, .show-box-type, .show-box-kind {
            overflow: hidden;
            z-index: 100000;
            width: 100%;
            height: 100%;
            position: fixed;
            /* padding-top: 1rem; */
            top: 1rem;
        }

        .local-input-area {
            z-index: 100000;
            text-align: center;
            width: 6.6rem;
            height: auto;
            margin: auto;
            background-color: white;
            margin-top: 1rem;
            position: relative;
        }

        .select-ul {
            overflow: hidden;
            padding-bottom: 0.4rem;
            padding-top: 0.4rem;
            width: 90%;
            height: auto;
            margin: auto;
        }

        .type-list-ul {
            overflow: hidden;
            padding-bottom: 0.4rem;
            padding-top: 0.4rem;
            width: 90%;
            height: auto;
            margin: auto;
        }

        .select-ul li {
            width: 1.5rem;
            float: left;
            height: 0.5rem;
            /*background-color: bisque;*/
            margin: 0.24rem;
        }

        .type-list-ul li {
            margin: 0.24rem 0 0.24rem 0.2rem;
            /* width: 1.5rem; */
            float: left;
            height: 0.5rem;
            /* background-color: bisque; */
            /* margin: 0.24rem 0; */
        }

        .select-ul li p input {
            display: none;
        }

        .type-list-ul li p input {
            display: none;
        }

        .select-ul li lib, .type-list-ul li lib {
            color: #666;
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
            background-color: transparent;
            border: 1px solid #ADADAD;
            border-radius: 0.1rem;
        }

        .select-btn-area {
            padding: 0.15rem 0;
            height: 1rem;
            width: 60%;
            margin: auto;
        }

        .cancel-btn {
            float: left
        }

        .ensure-btn {
            float: right;
            outline: none;
        }

        .cancel-btn, .ensure-btn {
            width: 1.5rem;
            font-size: 0.25rem;
            height: 0.5rem;
            color: #666;
            background-color: white;
            border-radius: 0.1rem;
            border: 1px solid #666;
        }

        /*选矿*/
        .select-ul li p label,
        .type-list-ul li p label {
            font-size: 0.28rem;
            color: #666;
            width: 100%;
            height: 100%;
            display: inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }

        .type-list-ul li p label {
            width: auto;
            padding: 0 0.1rem;
        }

        .select-ul li p {
            height: 0.5rem;
            width: 1.5rem;
            display: inline-block;
            line-height: 0.5rem;
        }

        .type-list-ul li p {
            /*padding: 0 0.1rem;*/
            height: 0.5rem;
            /* width: 1.5rem; */
            display: inline-block;
            line-height: 0.5rem;
        }

        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label {
            border-color: #FA8072;
            color: #FA8072;
        }
        .select-ul li p input[type=radio]:checked + label,
        .type-list-ul p input[type=radio]:checked + label {
            border-color: #FA8072;
            color: #FA8072;
        }

        /*右侧箭头*/
        .area-btn, .type-btn, .area-server {
            background-image: url(../../master/img/bottomIcon.jpg);
            background-repeat: no-repeat;
            background-position: 5rem center;
            background-size: 0.2rem;
            background-color: transparent;
            width: 66%;
            padding-left: 6%;
            padding-right: 10%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
    <script src="../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>注册</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="user-info-area">
        <ul>
            <li>
                <span class="li-type">邀请码</span>
                <input class="input-area" type="text" placeholder="如有 请输入邀请码(非必填)">
            </li>
            <li>
                <span class="li-type">手机号</span>
                <input class="input-area" type="text" placeholder="请输入紧急联系方式">
            </li>
            <li>
                <span class="li-type">验证码</span>
                <input class="input-area input-area-code" type="text" placeholder="输入验证码">
                <button class="get-code">获取验证码</button>
            </li>
            <li>
                <span class="li-type">所在区域</span>
                <div class="select-local-area">
                    <select>
                        <option>省</option>
                    </select>
                    <select>
                        <option>市</option>
                    </select>
                    <select>
                        <option>区</option>
                    </select>
                </div>

            </li>
            <li>
                <span class="li-type">服务区域</span>
                <input class="input-area area-btn" readonly type="text" value="请选择服务区域">
            </li>
            <li>
                <span class="li-type">服务类目</span>
                <input class="input-area type-btn" readonly type="text" value="请选择服务类目">
            </li>
            <li>
                <span class="li-type">服务类型</span>
                <input class="input-area area-server kind-btn" readonly type="text" value="请选择服务类型">
            </li>
            <li>
                <input class="input-area-me" type="text" placeholder="介绍以下自己吧～">
            </li>
        </ul>
        <div class="agreement">
            <section>
                <div class="checkbox-area">
                    <input type="checkbox" value="1" id="checkboxInput" name=""/>
                    <label for="checkboxInput"></label>
                </div>
            </section>
            <a href="#">我已经阅读并同意《云安装服务协议》</a>
        </div>
        <div class="prompt-area">
            <p style="line-height: 0.4rem">
                温馨提示：没有实名认证和没有设置服务信息、服务承诺的师傅无法接单哦。
            </p>
        </div>
        <div class="register-btn-area">
            <button class="register-btn one">实名认证</button>
            <button class="register-btn two">稍后认证</button>
        </div>
        <div class="to-login">
            <span class="had-account">已有云安装账号？</span>
            <a class="to-login-now" href="./login.html">立即登录</a>
        </div>
    </div>
</div>
<!--遮罩层-->
<!--<div class="modal-area">-->
<div class="modal-box hide"></div>
<!--服务地区-->
<div class="show-box-area hide">
    <div class="local-input-area">
        <ul class="select-ul">
            <li>
                <p>
                    <input name="serveArea" type="checkbox" value="桥西区1" id="check1"/>
                    <label for="check1">桥西区1</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveArea" type="checkbox" value="桥西区2" id="check2"/>
                    <label for="check2">桥西区2</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveArea" type="checkbox" value="桥西区3" id="check3"/>
                    <label for="check3">桥西区3</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveArea" type="checkbox" value="桥西区4" id="check4"/>
                    <label for="check4">桥西区4</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveArea" type="checkbox" value="桥西区5" id="check5"/>
                    <label for="check5">桥西区5</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveArea" type="checkbox" value="桥西区6" id="check6"/>
                    <label for="check6">桥西区6</label>
                </p>
            </li>
        </ul>
        <div class="select-btn-area">
            <button class="cancel-btn">取消</button>
            <button class="ensure-btn ensureArea-btn">确定</button>
        </div>
    </div>
</div>
<!--服务类目-->
<div class="show-box-type hide">
    <div class="local-input-area">
        <ul class="type-list-ul">
            <li>
                <p>
                    <input name="serveType" type="radio" value="送货到楼下" id="checkOne"/>
                    <label for="checkOne">送货到楼下</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveType" type="radio" value="送货到家" id="checkTwo"/>
                    <label for="checkTwo">送货到家</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveType" type="radio" value="送货到家并安装" id="checkThree"/>
                    <label for="checkThree">送货到家并安装</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveType" type="radio" value="安装" id="checkFour"/>
                    <label for="checkFour">安装</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveType" type="radio" value="维修" id="checkFive"/>
                    <label for="checkFive">维修</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveType" type="radio" value="返货" id="checkSix"/>
                    <label for="checkSix">返货</label>
                </p>
            </li>
        </ul>
        <div class="select-btn-area">
            <button class="cancel-btn">取消</button>
            <button class="ensure-btn ensureType-btn">确定</button>
        </div>
    </div>
</div>
<!--服务类型-->
<div class="show-box-kind hide">
    <div class="local-input-area">
        <ul class="type-list-ul">
            <li>
                <p>
                    <input name="serveKinds" type="checkbox" value="地球人" id="one"/>
                    <label for="one">地球人</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveKinds" type="checkbox" value="超级赛亚人" id="two"/>
                    <label for="two">超级赛亚人</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveKinds" type="checkbox" value="霍比特星人" id="three"/>
                    <label for="three">霍比特星人</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveKinds" type="checkbox" value="安装地球人" id="four"/>
                    <label for="four">安装地球人</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveKinds" type="checkbox" value="维修" id="five"/>
                    <label for="five">维修</label>
                </p>
            </li>
            <li>
                <p>
                    <input name="serveKinds" type="checkbox" value="返货地球人" id="six"/>
                    <label for="six">返货地球人</label>
                </p>
            </li>
        </ul>
        <div class="select-btn-area">
            <button class="cancel-btn cancelKinds-btn">取消</button>
            <button class="ensure-btn ensureKinds-btn">确定</button>
        </div>
    </div>
</div>
<!--</div>-->
<script src="../../master/lib/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // 隐藏
        $('.cancel-btn').click(function () {
            $('.modal-box').addClass('hide');//隐藏遮罩层
            $('.show-box-area').addClass('hide');//隐藏服务地区选择
            $('.show-box-type').addClass('hide');//隐藏服务类目选择
            $('.show-box-kind').addClass('hide');//隐藏服务类型选择
            document.documentElement.style.overflow = "scroll";//使网页恢复可滚
        });


        //显示隐藏控制---服务地区选择
        $('.area-btn').click(function () {
            $('.modal-box').removeClass('hide');
            $('.show-box-area').removeClass('hide');
            document.documentElement.style.overflow = "hidden";//禁止滚动
        });
        // 服务类目选择
        $('.type-btn').click(function () {
            $('.modal-box').removeClass('hide');
            $('.show-box-type').removeClass('hide');
            document.documentElement.style.overflow = "hidden";//禁止滚动
        });
        //服务类型选择
        $('.area-server').click(function () {
            $('.modal-box').removeClass('hide');
            $('.show-box-kind').removeClass('hide');
            document.documentElement.style.overflow = "hidden";//禁止滚动
        });
        //选择内容添加到页面－－服务区域
        $('.ensureArea-btn').click(function () {
            var arrayArea = new Array();
            $('input[name="serveArea"]:checked').each(function () {
                arrayArea.push($(this).val());
            });
            var areaStr = arrayArea.join(',');
            if(areaStr === ''){
                alert('至少选择一个区域')
            }else{
                $('.area-btn').val(areaStr);
                $('.modal-box').addClass('hide');//隐藏遮罩层
                $('.show-box-area').addClass('hide');//隐藏服务地区选择
                document.documentElement.style.overflow = "scroll";//使网页恢复可滚
            }

        });
        //选择内容添加到页面－－服务类目
        $('.ensureType-btn').click(function () {
            var arrayType = new Array();
            $('input[name="serveType"]:checked').each(function () {
                arrayType.push($(this).val());
            });
            var typeStr = arrayType.join(',');
            if(typeStr === ''){
                alert('至少选择一个类目')
            }else{
                $('.type-btn').val(typeStr)
                $('.modal-box').addClass('hide');//隐藏遮罩层
                $('.show-box-type').addClass('hide');//隐藏服务类目选择
                document.documentElement.style.overflow = "scroll";//使网页恢复可滚
            }
        });
        //选择内容添加到页面－－服务类型
        $('.ensureKinds-btn').click(function () {
            var arrayKinds = new Array();
            $('input[name="serveKinds"]:checked').each(function () {
                arrayKinds.push($(this).val());
            });
            var kindsStr = arrayKinds.join(',');
            if(kindsStr === ''){
                alert('至少选择一个类型')
            }else{
                $('.kind-btn').val(kindsStr)
                $('.modal-box').addClass('hide');//隐藏遮罩层
                $('.show-box-kind').addClass('hide');//隐藏服务类型选择
                document.documentElement.style.overflow = "scroll";//使网页恢复可滚
            }
        });




    });
</script>
</body>
</html>